自作Raycast Extensionでお手軽生産性アップ

Raycast Extensionの作成方法を簡単にご紹介します。

#Raycast

Logy

2023.04.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

prismatix事業部の太田です。

最近、ランチャーツールRaycastが非常に便利でよく使っています。

Raycastについてはこちらの記事をどうぞ

また、RaycastではStoreから拡張機能インストールするだけではなく、自作することができます。

https://developers.raycast.com/basics/getting-started

比較的簡単なReactのコードで構成されているため、RaycastのAPIをいくつか呼び出すだけで機能を実装できます。

今回はハンズオンを兼ねて、毎回自前で解析するのは少し面倒くさいJWTのデコーダー拡張機能を実装してみました。

テンプレートから作成する

https://developers.raycast.com/basics/create-your-first-extension#create-a-new-extension

Raycastからコマンドを実行することで、拡張機能用のテンプレートをもとに実装を始めることができます。

必要な部分だけ書き換えることでミスを減らせるので嬉しいですね。

テンプレートを保存したディレクトリにsrc/index.tsファイルがあるため、こちらをベースに実装してみます。

import { useState } from 'react';
import { Action, ActionPanel, Form, showToast, Toast } from '@raycast/api';

export default function Command() {
  const [jwt, setJwt] = useState('');
  const [decoded, setDecoded] = useState('');
  const [issuedAt, setIssuedAt] = useState('');
  const [expiredAt, setExpiredAt] = useState('');

  const handleSubmit = () => {
    try {
      const [header, payload, signature] = jwt.split('.');
      const decodedPayload = Buffer.from(payload, 'base64').toString('utf-8');
      const parsedPayload = JSON.parse(decodedPayload);
      const issuedAt = new Date(parsedPayload.iat).toLocaleString('ja-JP');
      const expiredAt = new Date(parsedPayload.exp).toLocaleString('ja-JP');
      const decodedString = JSON.stringify(parsedPayload, null, 2);
      setIssuedAt(issuedAt);
      setExpiredAt(expiredAt);
      setDecoded(decodedString);
    } catch (error: any) {
      showToast({
        style: Toast.Style.Failure,
        title: "Something went wrong",
        message: error.message,
      });
    }
  };

  return (
      <Form
        actions={
        <ActionPanel>
          <Action.SubmitForm title="Decode" onSubmit={handleSubmit} />
        </ActionPanel>
      }>
      <Form.TextField id="jwt" title="Payload" value={jwt} onChange={setJwt} />
      <Form.TextArea id="decoded" title="decoded" value={decoded} />
      <Form.TextField id="issued_at" title="issued_at" value={issuedAt} />
      <Form.TextField id="expired_at" title="expired_at" value={expiredAt} />
    </Form>
  );
}

以下の手順でデコードしているだけで、処理としては非常に単純です。